<html>
    <head>
        {assign var=cities value=$cities}
        {assign var=cities2 value=$cities}
        {foreach item=c2 from=$cities2 name=i}
            {if  $smarty.foreach.i.iteration==1} 
                {assign var=firstcity value=$c2.id}
            {/if}
        {/foreach}
        
        <title>{$title|default:"no title"}</title>

        {literal}
        <link href="css/fontstyle.css" rel="stylesheet" type="text/css" charset="utf-8" />
        <link href="css/style.css" rel="stylesheet" type="text/css" />

        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<!--            <script type="text/javascript" src="js/jquery-1.8.0.js"></script>-->
            <script src="js/jquery.ui.widget.js"></script>
            <script src="js/jquery.ui.accordion.js"></script>


        <style type="text/css">
            a { color: black; }
            a:hover {color: red; }
        </style>


            <script>
                $(function() {
                    $( "#accordion" ).accordion();
                });
            </script>


        <script type="text/javascript">
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-33771657-1']);
            _gaq.push(['_trackPageview']);

            (function() {
                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();
        </script>
        
                <!-- ImageReady Preload Script (worldmap.psd) -->
        <script type="text/javascript">
            <!--

            function newImage(arg) {
                if (document.images) {
                    rslt = new Image();
                    rslt.src = arg;
                    return rslt;
            }
            }

            function changeImages() {
                //alert(changeImages.arguments[1]);
                if (document.images && (preloadFlag == true)) {
                    for (var i=0; i<changeImages.arguments.length; i+=2) {
                        document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
            }
                }
            }

            var preloadFlag = false;
            function preloadImages() {
                    
                if (document.images) {
                    worldmap_01_us_over = newImage("images/worldmap_01-us_over.gif");
                    worldmap_01_others_over = newImage("images/worldmap_01-others_over.gif");
                    worldmap_01_asia_over = newImage("images/worldmap_01-asia_over.gif");
                    worldmap_01_china_over = newImage("images/worldmap_01-china_over.gif");
                    worldmap_01_europe_over = newImage("images/worldmap_01-europe_over.gif");
                    preloadFlag = true;
                }
                        
                initpage();
            }
                
                
            function showpackagelist(id, cityid) {
                var newlink = "packagecategory.php?id="+id+"&c="+cityid+"&p=2";
                document.location = newlink;
            }
                    
            // -->
        </script>
        <!-- End Preload Script -->
        {/literal}
    </head>
    <body id="packages" onload="preloadImages();">

        {include file='header.tpl'}
        
        {include file='sidebar.tpl'}

        <div id="container_breadcrumb">
            Home > Our Packages
        </div>

        <map name="worldmap_01_Map">
            <area shape="poly" alt="" coords="371,182, 364,170, 364,142, 378,126, 446,95, 475,110, 518,88, 622,82, 690,100, 705,86, 729,101, 783,101, 791,115, 742,154, 729,147, 746,125, 708,129, 700,139, 711,155, 699,161, 676,160, 664,145, 615,146, 608,153, 594,152, 590,159, 576,161, 564,140, 548,141, 508,163, 494,182, 501,195, 497,198, 503,209, 523,209, 510,230, 496,235, 474,200, 465,204, 474,219, 470,223, 449,220, 436,196, 441,188, 413,169, 393,168, 383,185" 
                  href="packagecategory.php?id=3"
                  onmouseover="changeImages('worldmap_01', 'images/worldmap_01-europe_over.gif'); return true;"
                  onmouseout="changeImages('worldmap_01', 'images/worldmap_01.gif'); return true;"
                  onmousedown="changeImages('worldmap_01', 'images/worldmap_01-europe_over.gif'); return true;"
                  onmouseup="changeImages('worldmap_01', 'images/worldmap_01-europe_over.gif'); return true;" />
            <area shape="poly" alt="" coords="576,162, 591,160, 595,154, 610,154, 616,148, 664,148, 674,162, 693,162, 693,168, 670,184, 663,176, 657,180, 662,187, 661,214, 636,220, 564,199, 557,183" 
                  href="packagecategory.php?id=2"
                  onmouseover="changeImages('worldmap_01', 'images/worldmap_01-china_over.gif'); return true;"
                  onmouseout="changeImages('worldmap_01', 'images/worldmap_01.gif'); return true;"
                  onmousedown="changeImages('worldmap_01', 'images/worldmap_01-china_over.gif'); return true;"
                  onmouseup="changeImages('worldmap_01', 'images/worldmap_01-china_over.gif'); return true;" />
            <area shape="poly" alt="" coords="543,217, 568,257, 647,347, 670,347, 675,338, 686,338, 713,366, 773,373, 786,353, 777,343, 736,332, 709,292, 721,283, 708,265, 687,265, 677,245, 661,223, 624,221, 623,214, 601,214, 599,208, 572,208, 571,201, 560,201, 559,209, 551,206" 
                  href="packagecategory.php?id=4"
                  onmouseover="changeImages('worldmap_01', 'images/worldmap_01-asia_over.gif'); return true;"
                  onmouseout="changeImages('worldmap_01', 'images/worldmap_01.gif'); return true;"
                  onmousedown="changeImages('worldmap_01', 'images/worldmap_01-asia_over.gif'); return true;"
                  onmouseup="changeImages('worldmap_01', 'images/worldmap_01-asia_over.gif'); return true;" />
            <area shape="poly" alt="" coords="203,232, 192,245, 197,250, 216,250, 203,271, 233,318, 220,375, 235,395, 239,390, 234,380, 256,352, 441,347, 458,338, 492,325, 506,304, 499,292, 482,294, 474,284, 501,245, 498,240, 487,241, 487,237, 493,232, 492,227, 469,228, 468,224, 466,220, 450,220, 435,195, 424,195, 408,175, 404,182,
                  391,182, 383,183, 383,188, 378,191, 373,187, 297,267, 280,267, 267,247, 257,246, 254,241, 234,240, 233,234, 227,234, 225,241, 210,241" 
                  href="packagecategory.php?id=5"
                  onmouseover="changeImages('worldmap_01', 'images/worldmap_01-others_over.gif'); return true;"
                  onmouseout="changeImages('worldmap_01', 'images/worldmap_01.gif'); return true;"
                  onmousedown="changeImages('worldmap_01', 'images/worldmap_01-others_over.gif'); return true;"
                  onmouseup="changeImages('worldmap_01', 'images/worldmap_01-others_over.gif'); return true;" />
            <area shape="poly" alt="" coords="27,103, 13,121, 22,131, 29,129, 32,134, 27,138, 22,136, 19,138, 20,142, 24,145, 28,141, 33,144, 38,141, 37,138, 42,136, 45,138, 50,136, 49,131, 53,129, 57,131, 83,131, 97,151, 102,149, 111,163, 105,165, 139,216, 147,213, 153,223, 175,223, 176,217, 172,213, 172,209, 176,207, 175,203, 181,200,
                  186,204, 190,200, 189,196, 193,195, 198,197, 198,200, 202,204, 207,200, 207,195, 210,194, 210,190, 228,168, 234,171, 238,168, 237,163, 242,162, 246,164, 250,161, 249,157, 245,155, 245,151, 251,149, 256,151, 255,155, 259,158, 270,158, 272,152, 289,129, 299,115, 305,118, 339,99, 335,85, 353,76, 352,71, 297,57, 191,90, 189,95,
                  181,95, 173,83" 
                  href="packagecategory.php?id=1"
                  onmouseover="changeImages('worldmap_01', 'images/worldmap_01-us_over.gif'); return true;"
                  onmouseout="changeImages('worldmap_01', 'images/worldmap_01.gif'); return true;"
                  onmousedown="changeImages('worldmap_01', 'images/worldmap_01-us_over.gif'); return true;"
                  onmouseup="changeImages('worldmap_01', 'images/worldmap_01-us_over.gif'); return true;" />
        </map>

        <div id="container_package" style="overflow: hidden;">
            <table border="0" width="100%" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="25%" valign="top">

                        <div id="leftframetitle">
                            <span class="red_color">OUR</span><span class="black_color">PACKAGES</span>
                        </div>
                        <div id="accordion">                            
                        {foreach item=d from=$dest}
                            {assign var=did value=$d.id}
                            
                                <p id="leftframecontent">
                            <img class="packagebutton" src="{$d.button_img}" />
                                    <a href="#" 
                                       class="packagelink"
                                       onmouseover="changeImages('worldmap_01', '{$d.image}'); return true;"
                                       onmouseout ="changeImages('worldmap_01', 'images/worldmap_01.gif'); return true;"
                                       onmousedown="changeImages('worldmap_01', '{$d.image}'); return true;"
                                       onmouseup  ="changeImages('worldmap_01', '{$d.image}'); return true;"
                                       onclick="showpackagelist('{$did}','{$firstcity}');"
                                       >{$d.country|upper}</a>
                                </p>
                                <div>
                                    <ul style="list-style: none; padding-left: 90px;">
                                        {foreach item=c from=$cities}
                                            <li><a href="packagecategory.php?id={$did}&c={$c.id}&p=1">From {$c.city}</a></li>
                                        {/foreach}                                        

                                    </ul>
                                </div>
                            {/foreach}
                        </div>

                        
                    </td>
                    <td height="430" valign="top">
                        <div id="rightframecontent">
                            <div  class="worldmap">
                                <img name="worldmap_01" 
                                     src="images/worldmap_01.gif" 
                                     width="800" 
                                     height="400" 
                                     border="0" 
                                     alt="" 
                                     usemap="#worldmap_01_Map" />
                            </div>
                        </div>

                    </td>
                </tr>
            </table>

            <div id="footer-spacer"></div>
        </div>

        {include file='footer.tpl'}

    </body>
</html>